<template>
  <div class="order-verify">
    <van-nav-bar
      title="确认订单"
      fixed
      placeholder
      left-arrow
      @click-left="$router.go(-1)"
    />
    <img class="verify-img" src="@/assets/img/colored-line.png" alt="" />
    <!-- //地址区域 -->
    <van-cell class="verify-cell">
      <div class="flex area jc-sb aic" @click="$router.push('/address/list')">
        <van-icon name="location-o"></van-icon>
        <div class="flex2 jc-c ml-15 fg2">
          <p class="flex">
            <span class="custom-title f16">张三 </span>
            <span class="custom-title">13800000000</span>
          </p>
          <span class="custom-title fonts"> 广东深圳南山区高新园 </span>
        </div>
        <van-icon class="f999" name="arrow" />
      </div>
    </van-cell>

    <div id="goods">
      <van-cell-group>
        <van-cell title="运费(满50元免运费)" />
      </van-cell-group>
      <van-card
        v-for="item in detail.carts"
        :key="item.productId"
        class="verify-card"
        :num="item.buyNum"
        :price="item.price | fMoney"
        :desc="item.slaveName"
        :title="item.masterName"
        :thumb="item.imgUrl"
      ></van-card>
      <!-- //尾部单元格 -->
      <van-cell-group>
        <van-cell title="商品总金额" :value="'￥'+ `${detail.totalMoney /100}`" />
      </van-cell-group>
      <van-cell-group>
        <van-cell title="运费" value="¥0.00" />
      </van-cell-group>
    </div>
    <!-- 单元格 优惠 -->
    <div id="cell" class="mt-15">
      <van-cell
        is-link
        title="优惠券"
        icon="comment-o"
        value="共3张可用"
      ></van-cell>
      <van-cell icon="comment-o" value="0张券可用" is-link>
        <!-- 使用 title 插槽来自定义标题 -->
        <template slot="title">
          <span class="custom-title">苏打券</span>
        </template>
      </van-cell>
      <van-cell icon="gem-o" value is-link>
        <p class="flex jc-sb">
          <span class="custom-title">余额</span>
          <span class="custom-title red">¥0.00</span>
        </p>
      </van-cell>
      <van-cell icon="balance-list-o" value="不开发票" is-link>
        <!-- 使用 title 插槽来自定义标题 -->
        <template slot="title">
          <span class="custom-title">发票</span>
        </template>
      </van-cell>
    </div>
    <!-- 支付 -->
    <van-submit-bar
      :price="Number(detail.totalMoney)"
      tip
      button-text="提交订单"
      @submit="submitOrder"
    />
    <!-- <van-action-sheet v-model="show" title="请选择支付方式">
      <PayWay></PayWay>
    </van-action-sheet> -->
  </div>
</template>

<script>
import PayWay from "./verify/PayWay";
import $http from "@/utils/request";
export default {
  components: {
    PayWay,
  },
  data() {
    return {
      show: false,
      detail: {},
      preOrderId: "",
    };
  },
  created() {
    this.preOrderId = this.$route.query.preOrderId;
    this.getDetail();
  },

  methods: {
    submitOrder() {
      let params = {
        addressInfo: "asdsaasdad",
        allFee: this.detail.totalMoney,
        preOrderId: this.preOrderId,
      };
      $http.post("/order/create", params).then((res) => {
        let data = {
          allFee: res.result.allFee,
          createTime: res.result.createTime,
          orderId: res.result.orderId,
          qrcode: res.result.qrcode,
        };
        this.$router.push({
          path: "/order/pay",
          query: data,
        });
      });
    },
    getDetail() {
      let params = {
        preOrderId: this.preOrderId,
      };
      $http.get("/preOrder/detail", { params }).then((res) => {
        this.detail = res.result;
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "./verify.less";
.verify-img {
  position: absolute;
  height: 3px;
}
.verify-cell {
  margin-top: 3px;
}
.verify-card {
  margin-top: 0px;
  background: #fff;
}
</style>
